<template>
    <div>
        <div class="top">
            <a href="javascript:history.go(-1)">
                <em><img src="../../images/return.png"></em>

            </a>
            <p>
                <i><img src="../../images/search.png"></i>
                <input type="text"placeholder="请输入搜索关键词">
            </p>
            <span><u><img src="../../images/more.png"></u></span>			
        </div>

    
    <div class="tab">    
        <mt-navbar v-model="selected">  
            <ul class="tab_ul"> 
                <li ><mt-tab-item id="1">品牌推荐  </mt-tab-item></li>
                <li ><mt-tab-item id="2">淘库好店/  </mt-tab-item></li>
                <li ><mt-tab-item id="3">淘库国际/  </mt-tab-item></li>
                <li ><mt-tab-item id="4">家用电器  </mt-tab-item></li>
                <li ><mt-tab-item id="5">手机数码  </mt-tab-item></li>
                <li ><mt-tab-item id="6">电脑办公  </mt-tab-item></li>
                <li ><mt-tab-item id="7">美妆护肤/  </mt-tab-item></li>
                <li ><mt-tab-item id="8">女装/内衣/  </mt-tab-item></li>
                <li ><mt-tab-item id="9">男装/户外/  </mt-tab-item></li>
                <li ><mt-tab-item id="10">箱包皮具/ </mt-tab-item></li>
                <li ><mt-tab-item id="11">珠宝首饰 </mt-tab-item></li>
                <li ><mt-tab-item id="12">母婴玩具 </mt-tab-item></li>
                <li ><mt-tab-item id="13">食品生鲜/ </mt-tab-item></li>
                <li ><mt-tab-item id="14">医药健康 </mt-tab-item></li>
                <li ><mt-tab-item id="15">家居用品/ </mt-tab-item></li>
                <li ><mt-tab-item id="16">家具建材/ </mt-tab-item></li>
                <li ><mt-tab-item id="17">汽车/汽车 </mt-tab-item></li>
            </ul>
        </mt-navbar> 

        <mt-tab-container v-model="selected" class="coner">
            <mt-tab-container-item  id="1" class="coner1">
                <div v-for="(v,i) in nar1" class="coner_nar">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="2" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="3" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[2]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar3_1" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[3]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3_2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="blue"></b>
                    <span>{{title_nar[4]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar3_3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="green"></b>
                    <span>{{title_nar[5]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3_4" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[6]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3_5" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="4" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="5" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[2]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar3_1" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[3]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3_2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="blue"></b>
                    <span>{{title_nar[4]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar3_3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="green"></b>
                    <span>{{title_nar[5]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3_4" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[6]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3_5" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="6" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="7" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="8" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="9" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

            <mt-tab-container-item  id="10" class="coner1">
                <p class="nar_title">
                    <b class="red"></b>
                    <span>{{title_nar[0]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                 <div v-for="(v,i) in nar2" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
                <p class="nar_title">
                    <b class="purple"></b>
                    <span>{{title_nar[1]}}</span>
                    <i><img src="../../images/right.png"></i>
                </p>
                <div v-for="(v,i) in nar3" class="coner_nar1">
                    <em><img :src="v.img"></em>
                    <span>{{v.title}}</span>
                </div>
            </mt-tab-container-item>

        </mt-tab-container>  
    </div>





    </div>
</template>

<script>
    export default{
        data(){        
            return {           
               selected:"1",
               nar1:{},
               nar2:{},
               title_nar:[],
               nar3:{},
               nar3_1:{},
               nar3_2:{},
               nar3_3:{},
               nar3_4:{},
               nar3_5:{}
            
            }
        },
        methods:{
           
        },
        mounted(){
            
            this.$http.get('./data/type.json')
            .then((response)=>{
                this.nar1=response.data.nar1;
                this.nar2=response.data.nar2;
                this.title_nar=response.data.title_nar;
                this.nar3=response.data.nar3;
                this.nar3_1=response.data.nar3_1;
                this.nar3_2=response.data.nar3_2;
                this.nar3_3=response.data.nar3_3;
                this.nar3_4=response.data.nar3_4;
                this.nar3_5=response.data.nar3_5;

                
            })
            .catch(function (error) {
            // handle error
            console.log(error);
        })
        .then(function () {
            // always executed
        });
        }
    }
</script>



<style>

/*头部搜索栏*/
    .top{
		height: 2.2rem;
        width: 100%;
        position: fixed;
        top: 0px;
        display: flex;
        justify-content: space-between;
        padding: 5px 0px;
        font-size: 1rem;
        text-align: center;
        background:white;
        color: gray;
        z-index: 1;
	}
	.top>a{
        width: 3.5rem;
        line-height: 2rem;
        color: black;
        display: block;
        display: flex;
        align-items: center;
	}
	.top>a>em{
        width: 1.2rem;
        height: 1rem;
        margin-top: -0.8rem;
        margin-left: 20px;
        opacity: 0.7;
        display: block;
	}
	.top>a>em>img{
		width: 100%;
		height: 100%;
	}
	.top>p{
        border: 1px solid #c7c7c7;
        border-radius: 3px;
        width: 70%;
        display: block;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
	}
	.top>p>i{
        position: absolute;
        left: 0.2rem;
        width: 1.5rem;
        height: 1.5rem;
	}
	.top>p>i img{
		width: 100%;
		height: 100%；
	}
	.top>p>input{
		width: 10rem;
        float: left;
        margin-left: 2rem; 
        border:none;
        outline: none;
	}
    .top>span>u{
		width: 1.2rem;
		height: 1.5rem;
        margin-top:0.2rem;
        margin-right:14px;
		display: block;
        opacity:0.6;
	}
    .top>span>u>img{
        width: 100%;
        height: 100%;
	}

/*table栏*/
    .tab{
        display:flex;
        flex-direction: row;
        width:100%;
        overflow: hidden;
        background-color: #FCFCFC
    }
    .tab .mint-navbar{
        width: 21%;
        background: #F5F5F5;
        color: gray;
        z-index: 1;
        top: 2.7rem;
        position: fixed;
        
    }
    .tab .mint-navbar .mint-tab-item.is-selected{
        border:none;
        color:red;
    }
    .tab_ul {
        width: 100%;
        display: flex;
        padding: 0px 0.4rem;
        flex-direction: column;
    }
    .tab_ul>li{
        height: 4rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid white;
    }

    /*品牌推荐*/
    .tab .mint-tab-container{
        width: 75%;
        margin-top: 2.8rem;
        margin-left: 21%;   
        background: #FCFCFC;
    }
    .tab .coner1{
        width:100%;
        display:flex;
        flex-wrap:wrap;
    }
    .tab .coner .coner_nar{
        width: 4.6rem;
        height: 4.6rem;
        background: gray;
        margin: 4px;
        text-align:center;
        background:white;
    }
    .tab .coner_nar>em{
        width: 100%;
        height: 2rem;
        margin: 0.5rem 0;
        display: block;
    }
    .tab .coner_nar>em img{
        width:100%;
        height:100%;
    }
    .tab .coner_nar>span{
        width:100%;
        font-size: 0.7rem;
        line-height:1rem;
    }

/*nar内容的标题*/
.nar_title{
        width: 100%;
        height: 1rem;
        display: block;
        padding: 0.5rem 0.5rem;
		background: #FCFCFC;
	}
	.nar_title>b{
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #d60e0e;
        margin: 0.3rem 0.4rem;
        display: block;
        float: left;
	}
    .nar_title>.purple{
        background:#AC92ED;
    }
    .nar_title>.blue{
        background:skyblue;
    }
     .nar_title>.green{
        background: #A0D468;
    }  
	.nar_title>span{
		font-size: 1rem;
		line-height: 1rem;
		display: block;
		float: left;
	}
	.nar_title>i{
		width: 1rem;
		height: 1rem;
		display: block;
		float: right;
	}
	.nar_title>i img{
		width: 100%;
		height: 100%;
	}

    /*淘库好店*/
  .tab .coner .coner_nar1{
        width: 30%;
        height: 4.6rem;
        background: gray;
        margin: 3px;
        text-align:center;
        background: #FCFCFC;
    }
    .tab .coner_nar1>em{
        width: 3rem;
        height: 3rem;
        margin: 0 auto;
        display: block;
    }
    .tab .coner_nar1>em img{
        width:100%;
        height:100%;
    }
    .tab .coner_nar1>span{
        width:100%;
        font-size: 0.7rem;
        line-height:1rem;
    }  

</style>